import Taro, {Component} from '@tarojs/taro'
import {View, Picker, Input} from '@tarojs/components'
import {AtList, AtMessage, AtTextarea, AtButton} from 'taro-ui'
import {connect} from '@tarojs/redux'
import './index.scss'
import {getShiftFrequency} from '../service'
import {add, asyncAdd, minus} from "../../../actions/counter";
import {getIndex} from "../../../constant";


@connect(({counter}) => ({
  counter
}))
export default class attendance extends Component {

  config = {
    navigationBarTitleText: '调班申请'
  };

  constructor(props) {
    super(props);
    this.state = {
      selectUserOid: '',
      selectUserName: '',
      userInfo: props.counter,
      frequencyList: [],
      beFrequencyList: [],
      formData: {}
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    console.log(this.state.userInfo)
  }

  componentWillUnmount() {
  }

  componentDidShow() { // 对应onShow，只有在onShow中才会监听到当前页面的改变
    let pages = Taro.getCurrentPages();
    let currPage = pages[pages.length - 1]; // 获取当前页面
    if (currPage.state && currPage.state.selectUserOid) { // 获取值
      this.setState(currPage.state)
    }
  }

  componentDidHide() {
  }

  handleChange = (reason) => {
    let {formData} = this.state;
    formData.reason = reason;
    this.setState({formData});
  };

  onPickerChange = (e, key) => {
    let value = e.detail.value;
    let obj = {...this.state.formData};
    if (key === 'shiftDate') {
      const {userInfo, selectUserOid} = this.state;
      let data = {shiftDate: value, shiftOid: userInfo.oid, beShiftOid: selectUserOid};
      if (data.beShiftOid) {
        getShiftFrequency(data).then(res => {
          obj[key] = value;
          this.setState({formData: obj, beFrequencyList: res.beFrequencyList, frequencyList: res.frequencyList});
        });
      } else {
        Taro.atMessage({message: '请先选择被调班人！', type: 'error'});
        return;
      }
    } else {
      obj[key] = value;
      this.setState({formData: obj});
    }
  };

  onRangeChange = (e, key) => {
    let {formData} = this.state;
    formData[key] = e.detail.value;
    this.setState({formData})
  };

  onSubmit = () => {
    const {formData, selectUserOid} = this.state;
    console.log({beShiftOid: selectUserOid, ...formData})
  };

  onReset() {
    let {formData} = this.state;
    formData.shiftDate = null;
    formData.reason = null;
    formData.beFrequency = null;
    formData.frequency = null;
    this.setState({formData})
  }

  turnToSelectUser() {
    Taro.navigateTo({url: '/pages/selectUser/index'})
  }

  render() {
    const {formData, frequencyList, beFrequencyList} = this.state;
    return (
      <View>
        <AtMessage/>
        <View className='main-m-t main-bg' style='padding-top: 20pt'>
          <View className='fromItem'>
            调班人： <Input value={this.state.userInfo.name} placeholder='请选择调班人'/>
          </View>
          <View className='fromItem' onClick={() => {
            this.turnToSelectUser()
          }}>
            被调班人：
            <Input value={this.state.selectUserName} placeholder='请选择被调班人'/>
          </View>

          <View className='fromItem'>
            调班日期：
            <Picker mode='date' className='content-picker' onChange={(e) => this.onPickerChange(e, 'shiftDate')}>
              <Input value={formData.shiftDate} placeholder='请选择调班日期'/>
            </Picker>
          </View>

          <View className='fromItem'>
            调班人班次：
            <Picker mode='selector' className='content-picker' range={frequencyList.map(item => item.name)}
                    onChange={(e) => this.onRangeChange(e,'frequency')}>
              <Input value={frequencyList.length > 0 ? frequencyList[getIndex(frequencyList,formData.frequency)].name : ''} placeholder='请选择调班人班次'/>
            </Picker>
          </View>

          <View className='fromItem'>
            被调班人班次：
            <Picker mode='selector' className='content-picker' range={beFrequencyList.map(item => item.name)}
                    onChange={(e) => this.onRangeChange(e,'beFrequency')}>
              <Input value={beFrequencyList.length > 0 ? beFrequencyList[getIndex(beFrequencyList,formData.beFrequency)].name : ''} placeholder='请选择被调班人班次'/>
            </Picker>
          </View>

          <View className='fromItem'>
            调班说明：
            <AtTextarea
              className='content'
              value={formData.reason}
              onChange={this.handleChange}
              maxLength={200}
              placeholder='请输入原因'
            />
          </View>


        </View>
        <View className='btn-view'>
          <AtButton type='secondary' onClick={this.onReset.bind(this)}>重置</AtButton>
          <AtButton type='primary' onClick={this.onSubmit.bind(this)}>提交</AtButton>
        </View>
      </View>

    )
  }
}
